<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form @submit.prevent="update()" accept-charset="UTF-8" class="form m-t" id="dataForm" method="post">
            <div>
              <div class="clearfix "></div>
              <div class="col-sm-8">
                <div class="form-group clearfix">
                  <label class="col-md-2 control-label">原始密码</label>
                  <div class="col-md-8">
                    <input aria-invalid="true" aria-required="true" class="form-control" id="bean-originalPassword" maxlength="64" minlength="4" name="originalPassword" placeholder="请输入原始密码" required="true" type="password" v-model="originalPassword"/>
                  </div>
                </div>
                <div class="form-group clearfix">
                  <label class="col-md-2 control-label">新密码</label>
                  <div class="col-md-8">
                    <input aria-invalid="true" aria-required="true" class="form-control" id="bean-newPassword" maxlength="64" minlength="4" name="newPassword" placeholder="请输入新密码" required="true" type="password" v-model="newPassword"/>
                  </div>
                </div>
                <div class="form-group clearfix">
                  <label class="col-md-2 control-label">密码确认</label>
                  <div class="col-md-8">
                    <input aria-invalid="true" aria-required="true" class="form-control" equalTo="#bean-newPassword" id="bean-confirmPassword" maxlength="64" minlength="4" name="confirmPassword" placeholder="请再次输入新密码" required="true" type="password" v-model="confirmPassword"/>
                  </div>
                </div>
              </div>
            </div>
            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div style="width: 200px; margin: 0 auto;text-align: center;">
                <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'
  import {axiosContentType, site} from '@/assets/js/boss'

  export default {
    data() {
      return {
        originalPassword: '', newPassword: '', confirmPassword: ''
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      that.staff.init(() => {
        $('#dataForm').validate();
      });
    },
    methods: {
      update() {
        let that = this;
        if ($('#dataForm').valid()) {
          that.staff.encrypt(function (encrypt) {
            axios.post(site.staff.ownPassword,
              $.param({
                originalPassword: that.crypto.encrypt(encrypt.key, that.crypto.md5(that.originalPassword)),
                newPassword: that.crypto.encrypt(encrypt.key, that.crypto.md5(that.newPassword)),
                confirmPassword: that.crypto.encrypt(encrypt.key, that.crypto.md5(that.confirmPassword))
              }),
              axiosContentType.xWwwFormUrlencoded).then(function (response) {
              const result = response.data;
              if (result.code === 0) {
                alert('密码更新成功,请重新登录!');
                parent.location.href = '/login';
              } else {
                alert(result.message);
              }
            });
          });
        }
      }
    }
  }
</script>

